import React, { Component } from 'react'
import './MallNav.scss'
import Countdown from "../countdown/Countdown"
import axios from 'axios'
import { withRouter } from "react-router-dom"

class MallNav extends Component {
  state = {
    mallNav: [],
    navTop: [],
  };

  // 异步请求
  componentDidMount() {
    axios.get("./json/MallNav.json").then((res) => {
      let navTop_str = res.data;
      let navTop = navTop_str.data[122995].list;
      // 过滤掉最后一个
      // console.log(res);
      // navTop = navTop.filter((item) => {
      //   return item.sort < 5;
      // });
      this.setState({ navTop });
      // console.log(res);
    });

    axios.get("./json/MallNav.json").then((res) => {
      let mallNav_str = res.data;
      let mallNav = mallNav_str.data[132827].list;
      // 过滤掉最后一个
      // console.log(res);
      mallNav = mallNav.filter((item) => {
        return item.sort < 17;
      });
      this.setState({ mallNav });
      // console.log(res);
    });
  }

  // 跳转 顶部导航（4个）
  goToMallNavTop = (index) => {
    if (index == 1) {
      // 跳转 顶部导航页面
      this.props.history.push("/mallNavTop/" + index);
    } else if(index == 2) {
      this.props.history.push("/");
    } else if(index == 3){
      this.props.history.push("/newProduct/" + index);
    } else {
      // 跳转 顶部导航 限时抢购页面
      this.props.history.push("/grabToday");
    }
  };

  // 跳转 导航列表
  goTonavlistdetails = (index) => {
    this.props.history.push("/navlistdetails/" + index);
  };

  render() {
    return (
      <div className="mgj-mallNav">
        <div className="nav-top">
          {this.state.navTop &&
            this.state.navTop.map((v, i) => {
              return (
                <div
                  className="navTop-item"
                  key={v.sort}
                  onClick={this.goToMallNavTop.bind(this, i)}
                >
                  <div className="item-img">
                    <img src={v.backgroundImage} alt="" />
                  </div>
                  <div className="item-tit">{v.title}</div>
                </div>
              );
            })}
        <Countdown/>
        </div>

        <div className="mall-navList">
          {this.state.mallNav &&
            this.state.mallNav.map((v, i) => {
              return (
                <div
                  className="navList-item"
                  key={v.sort}
                  onClick={this.goTonavlistdetails.bind(this, i)}
                >
                  <div className="item-img">
                    <img src={v.image} alt="" />
                  </div>
                  <div className="item-tit">{v.title}</div>
                </div>
              );
            })}
        </div>
      </div>
    );
  }
}

export default withRouter(MallNav)
